import React, { useEffect, useRef, useState } from 'react'; // import { PageContainer } from '@ant-design/pro-layout';
// import { Card, Alert, Typography } from 'antd';
// import { useIntl, FormattedMessage } from 'umi';

import styles from './portal.less';
import { Carousel, Card, Row, Col, List, Skeleton, Avatar, Button } from 'antd';
import { RightCircleFilled, LeftCircleFilled } from '@ant-design/icons';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import { Space } from 'antd';
import img1 from '@/assets/img1.png';
import img2 from '@/assets/img2.png';
import img3 from '@/assets/img3.png';
import img4 from '@/assets/img4.png';
import kejidongtai from '@/assets/kejidongtai.png';
interface DataType {
  gender?: string;
  name: {
    title?: string;
    first?: string;
    last?: string;
  };
  email?: string;
  picture: {
    large?: string;
    medium?: string;
    thumbnail?: string;
  };
  nat?: string;
  loading: boolean;
}
const data2 = Array.from({
  length: 4,
}).map((_, i) => ({
  href: 'https://ant.design',
  title: `ant design part ${i}`,
  avatar: 'https://joeschmoe.io/api/v1/random',
  description:
    'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  content:
    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
}));

const Portal: any = () => {
  const slider = useRef<any>();
  // const [initLoading, setInitLoading] = useState(true);
  // const [loading, setLoading] = useState(false);
  // const [data, setData] = useState<DataType[]>([]);
  const [list, setList] = useState<any[]>([
    {
      des: '基于GoogLeNet的稻米品种识别与碎米检测',
    },
    {
      des: '淀粉精细结构与大米蒸煮食味品质相关性的研究进',
    },
    {
      des: '细结构与糊化、回生、细结构与糊化、回生、',
    },
    {
      des: '大米淀粉理化指标对其回生特性的影响测',
    },
    {
      des: '不同屠宰体重对柯乐猪胴体性状',
    },
    {
      des: '基于GoogLeNet的稻米品种识别与碎米检测',
    },
  ]);
  const settings = {
    // dots: true,
    infinite: true,
    speed: 400,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplaySpeed: 2000,
  }; // const count = 6;
  // const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
  // useEffect(() => {
  //   fetch(fakeDataUrl)
  //     .then((res) => res.json())
  //     .then((res) => {
  //       setData(res.results);
  //       setList(res.results);
  //     });
  // }, []);

  return (
    <div className={styles.portal}>
      <div className={styles.carousel}>
        <Carousel ref={slider} autoplay {...settings}>
          <div className={styles.container}>
            <a
              className={styles.axxx}
              style={{
                backgroundImage: `url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4defb843d3f147d09b11954f6c04b8e5~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?')`,
              }}
            ></a>
          </div>
          <div className={styles.container}>
            <a
              className={styles.axxx}
              style={{
                backgroundImage: `url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/107aeca6561e4a009fac316400d9b689~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp??')`,
              }}
            ></a>
          </div>
          <div className={styles.container}>
            <a
              className={styles.axxx}
              style={{
                backgroundImage: `url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4ae7a19e7c347a2b85f297822e263f0~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?')`,
              }}
            ></a>
          </div>
          <div className={styles.container}>
            <a
              className={styles.axxx}
              style={{
                backgroundImage: `url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abafd0774f65482480ce815c29884220~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?')`,
              }}
            ></a>
          </div>
          <div className={styles.container}>
            <a
              className={styles.axxx}
              style={{
                backgroundImage: `url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2729084afde24bdc8707de7474bfceae~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?')`,
              }}
            ></a>
          </div>
        </Carousel>
        <a href="https://www.baidu.com" className={styles.sheji}>
          开始设计
        </a>
      </div>

      {/* <LeftCircleFilled onClick={() => slider.current.prev()} className={styles.prevIcon} />
      <RightCircleFilled onClick={() => slider.current.next()} className={styles.nextIcon} /> */}
      <h1>技术动态</h1>
      <div className={styles.technicalTrends}>
        <div className={styles.leftimg}>
          <img src={kejidongtai} />
        </div>
        <div className={styles.dongtai}>
          <List
            style={{
              maxWidth: 1200,
              margin: 'auto',
              textAlign: 'left',
            }}
            className="demo-loadmore-list"
            itemLayout="horizontal"
            dataSource={list}
            renderItem={(item) => (
              <List.Item actions={[<a key="list-loadmore-more">更多</a>]}>
                <Skeleton avatar title={false} loading={item.loading} active>
                  <List.Item.Meta
                    title={
                      <a href="https://ant.design">
                        <div className={styles.point}></div>
                        {item.des}
                      </a>
                    }
                  />
                </Skeleton>
              </List.Item>
            )}
          />
        </div>
      </div>
      <a>更多{'>>>'}</a>

      <div className={styles.list}>
        <h1>标准</h1>
        <List
          style={{
            maxWidth: 1200,
            margin: 'auto',
            textAlign: 'start',
          }}
          className="demo-loadmore-list"
          itemLayout="horizontal"
          dataSource={list}
          renderItem={(item) => (
            <List.Item actions={[<a key="list-loadmore-more">更多</a>]}>
              <Skeleton avatar title={false} loading={item.loading} active>
                <List.Item.Meta
                  title={
                    <a href="https://ant.design">
                      <div className={styles.point}></div>
                      {item.des}
                    </a>
                  }
                />
              </Skeleton>
            </List.Item>
          )}
        />
        <a>更多{'>>>'}</a>
      </div>

      <h1>书籍</h1>
      <div className={styles.books}>
        <Row
          style={{
            margin: 'auto',
          }}
        >
          {[img1, img2, img3, img4].map((item) => {
            return (
              <Col
                key={item}
                style={{
                  padding: 10,
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                }}
              >
                <Card
                  hoverable
                  style={{
                    width: 276,
                    height: '100%',
                    padding: 0,
                  }}
                >
                  <div className={styles.img}>
                    <img alt="example" src={item} />
                  </div>
                </Card>
                <span>书籍内容</span>
              </Col>
            );
          })}
        </Row>
      </div>
      <a>更多{'>>>'}</a>
      <h1>论文</h1>
      <div className={styles.lunwen}>
        <div className={styles.container}>
          <List
            itemLayout="vertical"
            size="large" // pagination={{
            //   // onChange: (page) => {
            //   //   console.log(page);
            //   // },
            //   pageSize: 3,
            // }}
            dataSource={data2} // footer={
            //   <div>
            //     <b>ant design</b> footer part
            //   </div>
            // }
            renderItem={(item) => (
              <List.Item
                key={item.title}
                actions={
                  [
                    // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                    // <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                    // <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                  ]
                }
              >
                <List.Item.Meta
                  title={<a href={item.href}>{item.title}</a>}
                  description={item.description}
                />
                {/* {item.content} */}
              </List.Item>
            )}
          />
        </div>
        <div className={styles.container}>
          <List
            itemLayout="vertical"
            size="large" // pagination={{
            //   // onChange: (page) => {
            //   //   console.log(page);
            //   // },
            //   pageSize: 3,
            // }}
            dataSource={data2} // footer={
            //   <div>
            //     <b>ant design</b> footer part
            //   </div>
            // }
            renderItem={(item) => (
              <List.Item
                key={item.title}
                actions={
                  [
                    // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                    // <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                    // <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                  ]
                }
              >
                <List.Item.Meta
                  title={<a href={item.href}>{item.title}</a>}
                  description={item.description}
                />
                {/* {item.content} */}
              </List.Item>
            )}
          />
        </div>
      </div>
      <a>更多{'>>>'}</a>
      <h1>专利</h1>
      <div className={styles.lunwen}>
        <div className={styles.container}>
          <List
            itemLayout="vertical"
            size="large" // pagination={{
            //   // onChange: (page) => {
            //   //   console.log(page);
            //   // },
            //   pageSize: 3,
            // }}
            dataSource={data2} // footer={
            //   <div>
            //     <b>ant design</b> footer part
            //   </div>
            // }
            renderItem={(item) => (
              <List.Item
                key={item.title}
                actions={
                  [
                    // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                    // <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                    // <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                  ]
                }
              >
                <List.Item.Meta
                  title={<a href={item.href}>{item.title}</a>}
                  description={item.description}
                />
                {/* {item.content} */}
              </List.Item>
            )}
          />
        </div>
        <div className={styles.container}>
          <List
            itemLayout="vertical"
            size="large" // pagination={{
            //   // onChange: (page) => {
            //   //   console.log(page);
            //   // },
            //   pageSize: 3,
            // }}
            dataSource={data2} // footer={
            //   <div>
            //     <b>ant design</b> footer part
            //   </div>
            // }
            renderItem={(item) => (
              <List.Item
                key={item.title}
                actions={
                  [
                    // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                    // <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                    // <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                  ]
                }
              >
                <List.Item.Meta
                  title={<a href={item.href}>{item.title}</a>}
                  description={item.description}
                />
                {/* {item.content} */}
              </List.Item>
            )}
          />
        </div>
      </div>
      <a>更多{'>>>'}</a>
    </div>
  );
};

export default Portal;
